<template>
	<el-main>
		<el-row>
			<el-col>
				<el-col>
					<v-chart class="chart" :option="pieOption" />
				</el-col>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { use } from "echarts/core";
	import { CanvasRenderer } from "echarts/renderers";
	import { PieChart } from "echarts/charts";
	import {
		TitleComponent,
		TooltipComponent,
		LegendComponent,
		GridComponent
	} from "echarts/components";
	import VChart, { THEME_KEY } from "vue-echarts";
	use([
		CanvasRenderer,
		PieChart,
		TitleComponent,
		TooltipComponent,
		LegendComponent,
		GridComponent
	]);
	export default {
		components: {
			VChart
		},
		provide: {
			[THEME_KEY]: "light"
		},
		data() {
			return {
				pieOption: {
					title: {
						text: "网络人气偶像",
						subtext: "网络人气偶像榜单",
						left: "center"
					},
					tooltip: {
						trigger: "item"
					},
					series: [
						{
							name: "人气指数（次）",
							type: "pie",
							minAngle: 5,
							avoidLabelOverlap: true,
							radius: ['40%', '70%'],
							data: [
								{ value: 20, name: '刘德华' },
								{ value: 50, name: '张学友' },
								{ value: 30, name: '郭富城' },
								{ value: 20, name: '黎明' }
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: "rgba(0, 0, 0, 0.5)"
								}
							}
						}
					]
				},
			}
		}
	}
</script>

<style scoped>
	.chart {
		min-height: 400px;
	}
</style>
